<template>
   <div>
       <div class="title">热搜榜</div>
        <button v-for="(item,index) in HotSearch" :key="item.id" id="HotOne" class="HotOne flex" @click="getSearchResult(item.searchWord)">
             <p class="rank">{{index+1}}</p>
			 <p class="name overflow">{{item.searchWord}}</p>
			 <!-- <img :src='item.iconUrl' v-if="item.iconUrl" class="iconUrl" alt="无法显示"> -->
			 <div class="hot">{{item.score |count }}</div>
        </button>
   </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
  export default 
  {
     name :'', 
     computed:{
        ...mapState('Music',['HotSearch'])
     },
     methods:{
      ...mapActions('Music',['getSearchResult'])
     }
  }
</script>
<style scoped lang='less'>
.title{
    width: 100%;
    font-size: 25px;
    margin-bottom: 10px;
    color: white;
}

@media screen and (max-width: 1000px){
   button.HotOne{
     width: 100%;
   }
}


.HotOne{
    width: 50%;
    height: 40px;
    flex-wrap: nowrap;
    color: white;
    font-size: 18px;
    justify-content: flex-start;
    position: relative;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 5px;

    .rank{
        margin-right: 5px;
        letter-spacing: 0;
        
    }
    .name{
      max-width: calc(100% - 80px);
         margin-right: 5px;
    }
    img{
        height: 20px;
        border-radius: 5px;
        margin-right: 5px;
    }
    .hot{
        position: absolute;
        right: 20px;
        background: rgba(0, 0, 0, 0.3);
        padding: 2px 5px;
        border-radius: 5px;
        letter-spacing: 0;
    }
}
.HotOne:nth-child(2){
  .rank{ color: red;}
}
.HotOne:nth-child(3){
  .rank{ color: #FE9C18;}
}
.HotOne:nth-child(4){
  .rank{ color: #FBC941;}
}

</style>